<template>
    <div class="bigBox">
        <div class="top">
            <div class="head_url">
                <div class="image">
                    <img src="" alt="">
                </div>
            </div>
                <div class="userInfoTitle">
                    <p>用户ID：</p>
                    <p>手机号：</p>
                    <p>我的爱车：</p>
                    <p>注册时间：</p>
                    <p>最近登录时间：</p>
                </div>
                <div class="userInfoContent">
                    <p>姜子鱼</p>
                    <p>129-6953-5623</p>
                    <p>豫A15623</p>
                    <p>2023-01-23 15:23:00</p>
                    <p>2023-01-23 15:23:00</p>
                </div>
        </div>
        <div class="hr"></div>
        <div class="bottom">
            <div class="left">
                <h5>充电信息</h5>
                <div class="left_main">
                    <h5>最近消费</h5>
                    <p>最近充电费用: &emsp; <span>80.00元</span></p>
                    <p>最近充电时间: &emsp; <span>2023-02-23 17:00:00</span></p>
                    <h5>累计消费&售后</h5>
                    <p>总充电费用: &emsp; <span>180.00元</span></p>
                    <p>总充电次数：&emsp; <span>50次</span></p>
                    <p>总充电度数：&emsp; <span>30KW.h</span></p>
                    <p>&emsp;提现金额：&emsp; <span>50元</span></p>
                    <p>&emsp;提现金额：&emsp; <span>50元</span></p>
                </div>
            </div>
            <div class="right">
                <h5>账户资金</h5>
                <div class="right_main">
                    <h5>钱包余额</h5>
                    <p>账户余额: &emsp; <span>80.00元</span></p>
                    <p>充值金额: &emsp; <span>2023-02-23 17:00:00</span></p>
                    <h5>优惠券</h5>
                    <p>&emsp;有效券：&emsp; <span>3张</span></p>
                    <p>&emsp;已使用：&emsp; <span>9张</span></p>
                    <p>&emsp;已过期：&emsp; <span>18张</span></p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="less" scoped>
.bigBox{
    overflow: hidden;
    background: #fbfcfe;
}
.top{
    overflow: hidden;
    width: 100%;
    height: 183px;
    background: white;
}
.bottom{
    display: flex;
    height: 364px;
}
.hr{
    width: 100%;
    height: 32px;
    background: #fbfcfe;
    z-index: 99999;
}
.left,.right{
    flex: 1;
    background: white;
}
.left{
    margin-right: 16px;
}
.head_url{
    float: left;
    height: 100%;
    width: 60px;
}
.image{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: green;
}
.userInfo{
    height: 100%;
    float: left;
}
.userInfoTitle{
    width: 100px;
    height: 100%;
    text-align: right;
    float: left;
}
.userInfoTitle p{
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-bottom: 16px;
}
.userInfoContent{
    float: left;
    text-align: left;
    margin-left: 8px;
}
.userInfoContent p{
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    margin-bottom: 16px;
}
.left,.right{
    text-align: left;
}
.left h5,.right h5{
    margin-bottom: 17px;
    margin-top: 32px;
    font-size: 16px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    text-align: left;
}
.left>h5{
    margin-top: 24px;
    text-align: center;
}
.left_main p,.right_main p{
    font-size: 14px;
    margin-bottom: 16px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
p>span{
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
}
</style>